<template>
  <div class="box">
    <div class="f1_content_left">
      <div class="f1_content_left_title">
        <h2>票据询价</h2>
      </div>
      <div class="f1_content_left_interest">
        <span>今日最低利率</span>
        <span style="color: #3f6ef2">商票{{ splv }}<i v-show="splv">%</i>起</span>
        <span style="color: #e8903c">银票{{ yplv }}<i v-show="splv">%</i>起</span>
      </div>
      <!-- 图片上传 -->
      <div class="license">
        <div style="display: flex">
          <!-- 图片上传 -->
          <el-upload
            action="#"
            class="permit el-upload--picture-card permit-front"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
            :on-change="handleChangeFront"
            :http-request="uploadFileFront"
            ref="pictureUpload1"
          >
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span class="el-upload-list__item-delete" @click="handleRemove1(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </div>
      </div>
      <!-- 查看示例 -->
      <div class="look">
        <el-popover placement="top-start" trigger="hover">
          <div v-viewer>
            <img
              style="width: 0.2344rem; height: 0.2344rem"
              src="http://operate.thunlink.cn/protocol/image/u185.png"
              alt=""
            />
          </div>

          <p slot="reference">查看示例</p>
        </el-popover>
      </div>
      <!-- 立即询价 -->
      <button class="enquiry_btn" :disabled="isLock" @click="goEnquiry">立即询价</button>
      <!-- <div class="enquiry_btn" @click="">立即询价</div> -->
    </div>
    <div>
      <!-- :autoplay="false" -->
      <el-carousel indicator-position="none">
        <el-carousel-item>
          <div class="f1 banner1">
            <div class="f1_content">
              <div class="virtual"></div>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="f1 banner2">
            <div class="f1_content">
              <div class="virtual"></div>
              <div class="f1_content_right">
                <div class="title">
                  <h1>
                    合作金融机构达
                    <span style="font-size: 0.3125rem">20</span>
                    家
                  </h1>
                  <h1>
                    白名单承兑企业达
                    <span style="font-size: 0.3125rem">{{ total }}</span> 家
                  </h1>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="f1 banner3">
            <div class="f1_content">
              <div class="virtual"></div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="f2">
      <div class="f2_content">
        <div>
          <div class="f2_content_title">热门承兑人</div>
        </div>
        <hot-ent />
      </div>
    </div>
    <div class="f3">
      <div class="f3_content">
        <div class="f3_content_search">
          <div class="f3_content_search_input">
            <span>产品类型</span>
            <el-select class="abc" v-model="userState" placeholder="请选择">
              <el-option key="999" label="全部" value="8918"></el-option>
              <el-option key="1" label="商票贴现" value="商票贴现"></el-option>
              <el-option key="2" label="商票质押" value="商票质押"></el-option>
              <el-option key="3" label="银票贴现" value="银票贴现"></el-option>
              <el-option key="4" label="财票贴现" value="财票贴现"></el-option>
            </el-select>
            <img src="@/assets/shangpiao/组310.png" alt="" />
          </div>
          <div class="f3_content_search_input" style="margin-left: 0.4271rem">
            <span>机构名称</span>
            <input
              @keyup.enter="selectkj()"
              type="text"
              placeholder="请输入机构名称"
              v-model="acceptorName"
            />
            <img @click="selectkj()" src="@/assets/shangpiao/组26.png" alt="" />
          </div>
        </div>
        <div v-loading="loading">
          <div class="f3_content_list" v-if="item">
            <div class="list" v-for="(item, index) in item" :key="index">
              <div
                class="tag"
                :class="{
                  sptx: item.entProductSubKJYParam1.producttype == '商票贴现',
                  spzy: item.entProductSubKJYParam1.producttype == '商票质押',
                  yptx: item.entProductSubKJYParam1.producttype == '银票贴现',
                  cptx: item.entProductSubKJYParam1.producttype == '财票贴现',
                  ypzy: item.entProductSubKJYParam1.producttype == '银票质押',
                  cpzy: item.entProductSubKJYParam1.producttype == '财票质押'
                }"
              >
                {{ item.entProductSubKJYParam1.producttype }}
              </div>
              <div class="list_left">
                <img :src="item.path" alt="" />
              </div>
              <div class="list_right">
                <h3 class="productName">
                  {{ item.entProductSubKJYParam1.productname }}
                </h3>
                <div class="product-item-success">
                  <ul>
                    <li>
                      <h4>{{ item.entProductSubKJYParam1.amount }}<span> </span></h4>
                      <!-- <h5>最高额度</h5> -->
                      <h5>{{ item.entProductSubKJYParam1.showamount }}</h5>
                    </li>
                    <li>
                      <h4>{{ item.entProductSubKJYParam1.radio }}<span> </span></h4>
                      <!-- <h5>最高额度</h5> -->
                      <h5>{{ item.entProductSubKJYParam1.showradio }}</h5>
                    </li>
                  </ul>
                </div>
                <div class="product-item-apply">
                  <h4 @click="goApply(item.entProductSubKJYParam1)">立即申请</h4>
                  <p @click="goParticulars(item.entProductSubKJYParam1)">查看详情</p>
                </div>
              </div>
            </div>
          </div>
          <div class="null" v-else>
            <img src="../../assets/shangpiao/组162.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <el-dialog title="提示" :visible.sync="visible" width="32%">
      <!-- 内容区域 -->
      <div class="dialog-center">
        <p>为了保证体验更多的服务</p>
        <p>{{ title }}</p>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="visible = false">稍后</button>
        <button class="dialog-footer-bnt btn2" @click="updateCoopeorgInvoice()">立即前往</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ProductcHoiceness from '@/components/ProductcHoiceness.vue'
import { base, myPostFetch, loginStatus } from '@/utils'
import HotEnt from '@/components/HotEnt.vue'
export default {
  components: { ProductcHoiceness, HotEnt },
  data() {
    return {
      total: '7900',
      splv: '0.5%',
      yplv: '0.5%',
      centerDialogVisible: true,
      visible: false,
      title: '',
      loading: false,
      isLock: false,
      userState: '',
      acceptorName: '',
      userStates: 8918,
      fileListFront: [], //票据正面
      pageNum: 1,
      pageSize: 999,
      hot: null,
      item: null
    }
  },
  watch: {
    userState() {
      this.userStates = this.userState
      this.pageNum = 1
      this.pageSize = 999
      this.selectkj()
    }
  },
  mounted() {
    document.documentElement.scrollTop = 0
    this.selectkj()
    // this.hots()
    this.selectProll()
    this.getWhiteList()
  },
  methods: {
    // 获取白名单列表
    // 产品列表
    async getWhiteList() {
      this.loading = true
      let url = '/api/BusinessSPs/getWhiteList'
      let params = {
        pageNum: 1,
        pageSize: 10
      }
      let data = await myPostFetch(url, params)
      if (!data.data) return
      this.total = data.data.pageInfo.total
    },
    // 最热承兑人
    async hots() {
      let hot = []
      let url = '/api/BusinessSPs/getHotAndNew'
      let params = {}
      let data = await myPostFetch(url, params)
      if (data.data == null) return
      // for (let index = 0; index < 5; index++) {
      //   hot.push(data.data.hot[index])
      // }
      this.hot = data.data.hot
    },
    // 获取最低利率
    async selectProll() {
      let url = '/api/BusinessSPs/selectProll'
      let params = {}
      let data = await myPostFetch(url, params)
      if (data) {
        if (data.data.sp != '' || data.data.sp) {
          this.splv = data.data.sp.split('-')[0]
        }
        if (data.data.yp != '' || data.data.yp) {
          this.yplv = data.data.yp.split('-')[0]
        }
      }
    },
    // 产品列表
    async selectkj() {
      this.loading = true
      let url = '/api/products/selectallSP'
      let params = {
        orgname: this.acceptorName,
        producttype: this.userStates,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      let data = await myPostFetch(url, params)
      if (data.data.list.length != 0 || data.data.list == 'null') {
        this.item = data.data.list
        this.loading = false
        return
      } else {
        this.item = null
        this.loading = false
      }
    },
    // 立即申请
    async goApply(item) {
      let loginState = sessionStorage.getItem('loginState')
      if (!loginState) {
        this.title = '请先完成登录'
        this.visible = true
        return
      }
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      if ((coopid !== 'null' && coopid !== 'undefined') & (rzstatus == 'succ')) {
        let data = await loginStatus(sessionStorage.getItem('customerid'), 'SCF012003')
        if (data.code == 10000) {
          this.$Message.error(data.msg)
          this.$router.push('/login')
          sessionStorage.clear()
          localStorage.clear()
          return
        }
        if (
          item.producttype == '商票贴现' ||
          item.producttype == '银票贴现' ||
          item.producttype == '财票贴现' ||
          item.producttype == '财票质押' ||
          item.producttype == '银票质押'
        ) {
          let productcode = item.productcode
          let productname = item.productname
          let producttype = item.producttype
          let id = item.id
          let radio = item.radio
          this.$store.commit('updataApplyProductcode', productcode)
          this.$store.commit('updataApplyProductname', productname)
          this.$store.commit('updataApplyId', id)
          this.$store.commit('updataApplyRadio', radio)
          localStorage.setItem('producttype', producttype)
          this.$router.push('/sptxApplication')
        } else if (item.producttype == '商票质押') {
          let productcode = item.productcode
          let productname = item.productname
          let id = item.id
          let radio = item.radio
          this.$store.commit('updataApplyProductcode', productcode)
          this.$store.commit('updataApplyProductname', productname)
          this.$store.commit('updataApplyId', id)
          this.$store.commit('updataApplyRadio', radio)
          this.$router.push('/spzyApplication')
        }
        this.setTime()
      } else {
        this.title = '请前往用户中心完成认证'
        this.visible = true
        return
      }
    },
    // 产品详情
    goParticulars(item) {
      if (
        item.producttype == '商票贴现' ||
        item.producttype == '银票贴现' ||
        item.producttype == '财票贴现' ||
        item.producttype == '财票质押' ||
        item.producttype == '银票质押'
      ) {
        let productcode = item.productcode
        let productname = item.productname
        let id = item.id
        let radio = item.radio
        this.$store.commit('updataApplyProductcode', productcode)
        this.$store.commit('updataApplyProductname', productname)
        this.$store.commit('updataApplyId', id)
        this.$store.commit('updataApplyRadio', radio)
        this.$router.push('/sptxApplication?row=2')
      } else if (item.producttype == '商票质押') {
        let productcode = item.productcode
        let productname = item.productname
        let id = item.id
        let radio = item.radio
        this.$store.commit('updataApplyProductcode', productcode)
        this.$store.commit('updataApplyProductname', productname)
        this.$store.commit('updataApplyId', id)
        this.$store.commit('updataApplyRadio', radio)
        this.$router.push('/spzyApplication?row=2')
      }
      this.setTime()
    },
    // 立即询价
    goEnquiry() {
      let loginState = sessionStorage.getItem('loginState')
      if (!loginState) {
        this.title = '请先完成登录'
        this.visible = true
        return
      }
      this.throttle()
      if (this.fileListFront.length == 0) return this.$Message.error('请上传票面')
      let formData = new FormData()
      formData.append('file', this.fileListFront)
      let token = sessionStorage.getItem('token')
      let url = base + '/api/BusinessSPs/ocr'
      this.axios
        .post(url, formData, {
          headers: { 'Content-Type': 'multipart/form-data', 'x-auth': token }
        })
        .then(res => {
          if (res.data.code == 10000) return this.$Message.error(res.data.msg)
          if (res.data.code == 100) {
            let file = res.data.data.fileURL
            let params = {
              draftNumber: res.data.data.ticketdata.draftNumber,
              totalAmount: res.data.data.ticketdata.totalAmount,
              acceptorBankNumber: res.data.data.ticketdata.acceptorBankNumber,
              acceptorAccountNumber: res.data.data.ticketdata.acceptorAccountNumber,
              acceptorName: res.data.data.ticketdata.acceptorName,
              validToDate: res.data.data.ticketdata.validToDate,
              issueDate: res.data.data.ticketdata.issueDate,
              draftStatus: res.data.data.ticketdata.draftStatus,
              issuerName: res.data.data.ticketdata.issuerName,
              issuerAccountNumber: res.data.data.ticketdata.issuerAccountNumber,
              issuerAccountBank: res.data.data.ticketdata.issuerAccountBank,
              payeeName: res.data.data.ticketdata.payeeName,
              payeeAccountNumber: res.data.data.ticketdata.payeeAccountNumber,
              payeeAccountBank: res.data.data.ticketdata.payeeAccountBank,
              totalAmountInWords: res.data.data.ticketdata.totalAmountInWords,
              acceptorAccountBank: res.data.data.ticketdata.acceptorAccountBank,
              agreementNumber: res.data.data.ticketdata.agreementNumber,
              assignability: res.data.data.ticketdata.assignability,
              acceptanceDate: res.data.data.ticketdata.acceptanceDate,
              fileId: res.data.data.fileId
            }
            params = JSON.stringify(params)
            sessionStorage.setItem('ocr', params)
            sessionStorage.setItem('file', file)
            this.$router.push('/enquiry')
            // this.setTime();
          } else {
            this.$Message.error('OCR识别失败')
          }
        })
    },
    // 跳转至登录或者认证
    updateCoopeorgInvoice() {
      this.visible = false
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      let loginState = sessionStorage.getItem('loginState')
      this.visible = false
      if (!loginState) {
        this.$router.push('/login')
        this.setTime()
        return
      }
      if (coopid == 'null' || rzstatus != 'succ') {
        this.$router.push('/platform')
        this.setTime()
        return
      } else if (coopid == 'null') {
        this.$router.push('/platform')
        this.setTime()
        return
      }
    },
    // 定时器
    setTime() {
      setTimeout(() => {
        this.$router.go(0)
      }, 500)
    },
    // 上传
    //点击上传文件触发的额外事件,清空fileList
    delFile() {
      this.fileListFront = []
    },
    handleChangeFront(file, fileList) {
      this.fileListFront = fileList[0].raw
      this.file = JSON.stringify(file)
    },
    //自定义上传文件
    uploadFileFront(file) {
      this.formData.append('file', file.file)
    },
    // 删除
    handleRemove1(file) {
      this.$refs.pictureUpload1.handleRemove(file)
      this.fileListFront = []
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 防止重复提交
    throttle() {
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 5000)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  font-size: 0.2344rem;
  background-color: rgb(248, 249, 251);
  .banner1 {
    background: url(@/assets/shangpiao/组133.png) no-repeat;
    background-size: 100% 100%;
  }
  .banner2 {
    background: url(@/assets/shangpiao/组138.png) no-repeat;
    background-size: 100% 100%;
  }
  .banner3 {
    background: url(@/assets/shangpiao/组139.png) no-repeat;
    background-size: 100% 100%;
  }

  .f1_content_left {
    z-index: 99;
    position: absolute;
    box-sizing: border-box;
    top: 0.2865rem;
    left: 0.7813rem;
    padding: 0.1979rem 0.1719rem;
    width: 2.1875rem;
    height: 2.6354rem;
    background-color: #fff;
    border-radius: 0.0208rem;
    .f1_content_left_title {
      font-size: 0.1146rem;
      font-family: Source Han Sans SC;
      font-weight: 500;
      color: #131313;
      margin-bottom: 0.1927rem;
    }
    .f1_content_left_interest {
      display: flex;
      justify-content: space-between;
      width: 100%;
      font-size: 0.0938rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #afb1bd;
    }
    // 上传
    .license {
      display: flex;
      justify-content: center;
      margin-left: 0.1042rem;
      margin-top: 0.2083rem;
      margin-bottom: 0.1042rem;
      .permit {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 1.4583rem;
        height: 0.8333rem;

        margin-right: 0.1042rem;
        overflow: hidden;
        cursor: pointer;
      }
      .permit-front {
        background: url(@/assets/shangpiao/组132.png) no-repeat;
        background-size: 100% 100%;
      }
    }
    // 查看示例
    .look {
      cursor: pointer;
      display: flex;
      justify-content: center;
      width: 100%;
      font-size: 0.0729rem;
      color: #a5a5a5;
      margin-bottom: 0.1615rem;
    }
    // 立即询价
    .enquiry_btn {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1.84rem;
      height: 0.25rem;
      background: linear-gradient(-90deg, #5d98f8, #4b5af8);
      box-shadow: 0px 0.0313rem 0.1042rem 0px rgba(0, 40, 193, 0.5);
      border-radius: 0.0417rem;
      font-size: 0.0938rem;
      color: #fff;
    }
  }
  .f1 {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    height: 3.2135rem;
    .f1_content {
      position: relative;
      display: flex;
      width: 8.4375rem;
      height: 2.6354rem;
      .virtual {
        width: 2.1875rem;
        height: 2.6354rem;
      }
      .f1_content_right {
        box-sizing: border-box;
        padding: 0rem 0.1042rem 0 0.3125rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .title {
          color: #fff;
          margin-left: 0.0781rem;
          h1 {
            color: #181d23;
            font-size: 0.25rem;
            font-weight: 600;
            font-style: italic;
          }
          p {
            font-weight: 100;
            font-size: 0.1458rem;
            line-height: 0.3125rem;
          }
          img {
            cursor: pointer;
            margin-top: 0.1302rem;
            width: 1.3438rem;
          }
        }
      }
    }
  }
  .f2 {
    width: 10rem;
    height: 0.3125rem;
    background: #ebedf2;
    .f2_content {
      display: flex;
      align-items: center;
      margin: 0 auto;
      width: 8.4375rem;
      height: 100%;
      overflow: hidden;
      .f2_content_title {
        width: 0.625rem;
        height: 0.1823rem;
        font-size: 0.1146rem;
        font-weight: 500;
        color: #000000;
        margin-right: 0.1979rem;
      }
      .f2_content_all {
        cursor: pointer;
        width: 0.349rem;
        height: 0.1302rem;
        font-size: 0.0833rem;
        font-weight: 400;
        border-bottom: 0.0052rem solid #3f6ef2;
        color: #3f6ef2;
        margin-right: 0.2917rem;
      }
      .f2_content_list {
        box-sizing: border-box;
        padding: 0.0208rem 0.0521rem;
        display: flex;
        align-items: center;
        width: 1.3542rem;
        height: 0.1458rem;
        margin-right: 0.1563rem;
        background: #dce4f8;
        p {
          width: 1.3542rem;
          font-size: 0.0833rem;
          font-weight: 400;
          color: #333333;
          text-align: center;
          white-space: nowrap; /* 禁止文本换行 */
          overflow: hidden; /* 隐藏溢出的部分 */
          text-overflow: ellipsis; /* 显示省略号 */
        }
      }
    }
  }
  .f3 {
    box-sizing: border-box;
    padding: 0.2604rem 0 0.5313rem 0;
    width: 10rem;
    background-color: #f2f4f7;
    .f3_content {
      width: 8.4375rem;
      margin: 0 auto;
      .f3_content_title {
        font-size: 0.2292rem;
        font-weight: 500;
        color: #000000;
        margin-bottom: 0.2604rem;
      }
      .f3_content_search {
        display: flex;
        align-items: center;
        width: 100%;
        .f3_content_search_input {
          position: relative;
          display: flex;
          align-items: center;
          input {
            position: relative;
            box-sizing: border-box;
            height: 0.224rem;
            width: 1.6406rem;
            font-size: 0.0729rem;
            border: 0.0052rem solid #e0e0e0;
            padding: 0.0521rem 0.0521rem;
            color: #606266;
            outline: 0;
          }
          input::-webkit-input-placeholder {
            font-size: 0.0833rem;
            color: #afb1bd;
          }
          span {
            font-size: 0.1042rem;
            font-weight: 500;
            color: #333333;
            margin-right: 0.1042rem;
          }
          img {
            width: 0.0833rem;
            position: absolute;
            right: 0.0781rem;
          }
        }
      }
      .f3_content_list {
        margin-top: 0.2604rem;
        .list {
          display: flex;
          position: relative;
          box-sizing: border-box;
          padding: 0.1042rem 0.6563rem 0.1042rem 0.4167rem;
          width: 8.4375rem;
          height: 1.1458rem;
          background: #ffffff;
          box-shadow: 0px 0.0469rem 0.0938rem 0px rgba(207, 207, 207, 0.22);
          border-radius: 0.0208rem;
          margin-top: 0.1563rem;
          .tag {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 0.5104rem;
            height: 0.125rem;
            background: #13b5b1;
            border-radius: 0.0208rem 0px 0px 0px;
            font-size: 0.0833rem;
            font-weight: 400;
            color: #ffffff;
            &.sptx {
              background: #3f6ef2;
            }
            &.spzy {
              background: #ff6060;
            }
            &.yptx {
              background: #e8903c;
            }
            &.cptx {
              background: #13b5b1;
            }
            &.ypzy {
              background: #ad5afa;
            }
            &.cpzy {
              background: #20b5da;
            }
          }
          .list_left {
            display: flex;
            align-items: center;
            width: 1.6406rem;
            height: 0.9375rem;
            border-right: 0.0052rem solid #e5e5e5;
            img {
              width: 1.3021rem;
            }
          }
          .list_right {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1;
            width: 0.7813rem;
            height: 0.9375rem;
            margin-left: 0.5573rem;
            .productName {
              font-size: 0.1563rem;
              font-weight: 500;
              color: #000000;
            }
            .product-item-success {
              ul {
                display: flex;
                justify-content: space-around;
                li {
                  width: 1.0417rem;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  height: 0.3646rem;
                  h4 {
                    font-size: 0.1667rem;
                    font-weight: 400;
                    color: #e8903c;
                    span {
                      font-size: 0.0938rem;
                    }
                  }
                  h5 {
                    font-size: 0.0938rem;
                    font-weight: 400;
                    color: #858585;
                  }
                }
              }
            }
            .product-item-apply {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-between;
              height: 0.4479rem;
              cursor: pointer;
              h4 {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 0.8333rem;
                height: 0.2188rem;
                background: linear-gradient(-90deg, #5d98f8, #4b5af8);
                box-shadow: 0px 0.0313rem 0.1042rem 0rem rgba(0, 40, 193, 0.5);
                border-radius: 0.0208rem;
                font-size: 0.0938rem;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #ffffff;
                cursor: pointer;
              }

              p {
                text-align: center;
                width: 0.5rem;
                height: 0.1302rem;
                font-size: 0.0833rem;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #738bd0;
                border-bottom: 0.0052rem solid #738bd0;
                cursor: pointer;
              }
            }
          }
        }
      }
      .null {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 400px;
      }
    }
  }
}
// 弹出框
.dialog-center {
  text-align: center;
  overflow: hidden;
  p {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    font-size: 0.0833rem;
    font-family: Source Han Sans SC;
    font-weight: 600;
    color: #4d4d4d;
  }
}
.dialog-footer {
  display: flex;
  justify-content: space-evenly;
  width: 70%;
  margin: 0 auto;
  z-index: 9999;
  .dialog-footer-bnt {
    width: 0.6302rem;
    height: 0.1615rem;
    color: #3f6ef2;
    border: 1px solid #3f6ef2;
    border-radius: 0.0208rem;
    background-color: #fff;
    z-index: 9999;
  }
  .btn2 {
    color: #fff;
    background-color: #3f6ef2;
    z-index: 9999;
  }
  .abc {
    width: 1.9167rem;
    .el-select {
      width: 100%;
    }
  }
}
::v-deep .el-dialog__body {
  padding: 0.1563rem 0.1042rem;
  color: #606266;
  font-size: 0.0729rem;
  word-break: break-all;
}
::v-deep .el-dialog__header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 46px;
  padding: 0.1042rem 0.1042rem 0.0521rem;
  border-bottom: 0.0052rem solid #dddbdb;
}
::v-deep .el-dialog__title {
  font-size: 0.1042rem;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #3f6df1;
}
// 轮播图
::v-deep .el-carousel {
  width: 10rem;
  height: 3.2135rem;
  position: relative;
}

::v-deep .el-carousel__container {
  height: 3.2135rem;
}
// 上传
::v-deep .el-upload--picture-card {
  background-color: rgba(245, 245, 245, 0.1);
  border: 0;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 1.5104rem;
  height: 0.8854rem;
  display: flex;
  margin: 0;
  z-index: 888;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 1.5104rem;
  height: 0.8854rem;
}
::v-deep .el-upload--picture-card {
  line-height: 0;
}
/* 下拉选择器 */
::v-deep .abc .el-input__inner {
  border-radius: 0px;
  padding: 0 0.0781rem;
  height: 0.224rem;
  width: 1.6406rem;
  &::placeholder {
    font-size: 0.0833rem;
    color: #afb1bd;
  }
}
::v-deep .abc .el-select {
  width: 1.6406rem;
}
::v-deep .el-icon-arrow-up:before {
  content: '';
}
</style>
<style>
.el-popover {
  min-width: 0.2604rem;
}
</style>
